﻿/*
 *  公用信息提示模态窗体
 */

if (!Hsp.Modal) Hsp.Modal = {};

/// <summary>
/// 模态窗体初始化
/// modalId-窗体编号
/// title-窗体标题
/// modalSize-窗体大小：modal-sm, 空值, modal-lg
/// callback-回调函数
/// </summary>

Hsp.Modal.Init = function(modalId, title, modalSize) {

    modalSize = modalSize || "";
    var $body = $("body");
    var $modal = $(`<div id="${modalId}" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="${modalId}Label">
        </div>`);

    var $content = $(`
        <div class="modal-dialog ${modalSize}" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="${modalId}Label">' + title + '</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer"></div>
            </div>
        </div>`);

    if ($body.length) {
        $content.appendTo($modal);
        $modal.appendTo($body);
    }
};


/// <summary>
/// 进度条消息模态窗体
/// modalId-窗体编号
/// </summary>

Hsp.Modal.ProgressBar = function(modalId) {

    var $content = $(`
                <div class="progress" style="margin-top: 15px;">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
                        <span>0%</span>
                    </div>
                </div>`);

    $content.appendTo($("#" + modalId + " .modal-body"));
};


/// <summary>
/// 圆形进度条模态窗体
/// modalId-窗体编号
/// title-窗体标题
/// </summary>

Hsp.Modal.CircleMessage = function(modalId, title) {

    var $body = $("body");
    var $modal = $(`<div id="${modalId}" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"></div>`);

    var $content = $(`
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="d-flex align-items-center">
                          <strong>${title}</strong>
                          <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>`);

    if ($body.length) {
        $content.appendTo($modal);
        $modal.appendTo($body);
    }

    // 模态窗体关闭事件 
    $("#" + modalId).on("hidden.bs.modal", function() {
        $("#" + modalId).remove();
    });

    $("#" + modalId).on("shown.bs.modal", function(e) {
        // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零  
        //$(this).css('display', 'block');
        //var modalHeight = $(window).height() / 2 - $("#" + modalId + " .modal-dialog").height() / 2;
        //$(this).find('.modal-dialog').css({
        //    'margin-top': modalHeight
        //});
    });
};


/*
info(提示)
correct(成功)
warn(警告)
error(错误)
confirm(确认)
popup(提示，无按钮)
openWin(模态窗体)
 */

/*
 * <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
 * 
 * <div class="modal-dialog" role="document">
 * 
 * <div class="modal-content">
 * 
 * <div class="modal-header"> <button type="button" class="close"
 * data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 * <h4 class="modal-title">Modal title</h4> </div>
 * 
 * <div class="modal-body"> ... </div>
 * 
 * <div class="modal-footer"> <button type="button" class="btn btn-default"
 * data-dismiss="modal">Close</button> <button type="button" class="btn
 * btn-primary">Save changes</button> </div>
 * 
 * </div>
 * 
 * </div>
 * 
 * </div>
 */

//modals.info('提示信息');
//modals.correct('操作成功信息');
//modals.warn('警告信息');
//modals.error('错误提示信息');

//modals.confirm({
//    text: "是否为选择的" + userArr.length + "个用户建立群组？",
//    callback: function () {
//        openGroupAddWin();
//        modals.hideWin("receiverWin");
//    },
//    cancel_call: function () {
//        setReceiverUserIds();
//        modals.hideWin("receiverWin");
//    }
//})

(function ($, window, document, undefined) {
    window.modals = window.modals || {};

    function modalStructure(config, ok, cancel) {
        // <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        var modal = document.createElement("DIV");
        modal.id = "modal-tips-div";
        modal.className = "modal fade";
        modal.tabindex = -1;
        modal.role = "dialog";
        modal.setAttribute("aria-labelledby", "myModalLabel");

        // <div class="modal-dialog" role="document">
        var dialog = document.createElement("DIV");
        dialog.className = "modal-dialog modal-" + (config.large ? "lg" : "sm");

        //update for HANZO, 2016/12/28
        if (config.width) {
            dialog.style.width = config.width + "px";
        }

        dialog.role = "document";
        modal.appendChild(dialog);

        // <div class="modal-content">
        var content = document.createElement("DIV");
        content.className = "modal-content";
        dialog.appendChild(content);

        // <div class="modal-header">
        var header = document.createElement("DIV");
        header.className = "modal-header";

        // <button type="button" class="close" data-dismiss="modal"
        // aria-label="Close"><span aria-hidden="true">&times;</span></button>
        var closeIcon = document.createElement("BUTTON");
        closeIcon.className = "close";
        closeIcon.type = "button";
        closeIcon.setAttribute("data-dismiss", "modal");
        closeIcon.setAttribute("aria-label", "Close");
        closeIcon.innerHTML = '<span aria-hidden="true">&times;</span>';
        header.appendChild(closeIcon);

        // //<h4 class="modal-title">Modal title</h4>
        if (config.title) {
            var title = document.createElement("H5");
            title.id = "myModalLabel";
            title.className = "modal-title";
            title.innerHTML = /* '<i class="fa fa-fw fa-info-circle"></i>'+ */config.title;
            header.appendChild(title);
        }

        content.appendChild(header);

        // <div class="modal-body">
        var body = document.createElement("DIV");
        body.className = "modal-body";

        //update for HANZO, 2016/12/28
        if (config.src) {
            body.style.height = config.height + "px";

            var frame = document.createElement("iframe");
            frame.style.margin = 0;
            frame.style.padding = 0;
            frame.style.width = "100%";
            frame.style.height = "100%";
            frame.style.border = "none";
            frame.src = config.src;
            body.appendChild(frame);
        } else {
            body.innerHTML = config.text || "";
        }

        content.appendChild(body);

        if (ok || cancel || config.has_footer) {
            // <div class="modal-footer">
            var footer = document.createElement("DIV");
            footer.className = "modal-footer";

            if (cancel) {
                // <button type="button" class="btn btn-default"
                // data-dismiss="modal">Close</button>
                var btn_close = document.createElement("BUTTON");
                btn_close.className = "btn btn-default btn-sm";
                btn_close.type = "button";
                btn_close.setAttribute("data-dismiss", "modal");
                btn_close.innerHTML = config.cancel_label;
                btn_close.onclick = function () {
                    if (config.cancel_call) {
                        config.cancel_call.call(this);
                    }
                };

                footer.appendChild(btn_close);
            }

            if (ok) {
                // <button type="button" class="btn btn-primary">Save</button>
                var btn_ok = document.createElement("BUTTON");
                btn_ok.className = "btn btn-primary btn-sm";
                btn_ok.type = "button";
                //btn_ok.setAttribute('data-dismiss', 'modal');
                btn_ok.innerHTML = config.ok_label;
                btn_ok.onclick = function () {
                    $("#modal-tips-div").modal("hide");
                    if (config.callback) {
                        config.callback.call(this);
                    }
                };

                footer.appendChild(btn_ok);
            }

            content.appendChild(footer);
        }

        return modal;
    }

    function createModal(config, ok, cancel) {
        removeModal();

        var modal = modalStructure(config, ok, cancel);

        document.body.appendChild(modal);

        $("#modal-tips-div").modal("show");

        $("#modal-tips-div").on("hidden.bs.modal", function () {
            modals.fixwyhtml5();
            removeModal();
            $(this).removeData("bs.modal");
        });

        return modal;
    }

    function removeModal() {
        $("#modal-tips-div").remove();
        $("div.modal-backdrop").remove();
    }

    /**
     * 目前阶段涉及参数说明 { title: 'modal标题', text: '提示内容', ok_label: '确定按钮的内容',
     * cancel_label: '取消按钮的内容', callback: '确定按钮的回调函数', cancel_call: '取消按钮的回调函数',
     * large: 'modal大小模式' }
     */
    var _CONFIG = {
        ok_label: "<i class='glyphicon glyphicon-ok' aria-hidden='true'></i> 确定",
        cancel_label: "<i class='glyphicon glyphicon-remove' aria-hidden='true'></i> 关闭",
        large: false
    };

    function modal_params(text, callback) {
        return $.extend({}, _CONFIG, (typeof text != "object") ? { text: text, callback: callback } : text);
    }

    var _TITLE = { info: "<i class='glyphicon glyphicon-info-sign' aria-hidden='true'></i> 提示", correct: "<i class='glyphicon glyphicon-ok-sign' aria-hidden='true'></i> 成功", warn: "<i class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></i> 警告", error: "<i class='glyphicon glyphicon-remove-sign' aria-hidden='true'></i> 错误" };

    function _alert(args, type) {
        var cfg = modal_params.apply(this, args);
        cfg.title = cfg.title || _TITLE[type];

        return createModal(cfg, false, true);
    }

    /**
     * 用法: 1.modals.info('...'); 2.modals.info({ ... });
     * 
     * correct、warn、error可不要。为统一规范尽量选择相应函数
     * 
     * @returns {*}
     */
    modals.info = function () {
        return _alert.call(this, arguments, "info");
    };

    modals.correct = function () {
        return _alert.call(this, arguments, "correct");
    };

    modals.warn = function () {
        return _alert.call(this, arguments, "warn");
    };

    modals.error = function () {
        return _alert.call(this, arguments, "error");
    };

    /**
     * 用法: 1.modals.confirm('...'); 2.modals.confirm({ ... });
     * 
     * @returns {*}
     */
    modals.confirm = function () {
        var cfg = modal_params.apply(this, arguments);
        cfg.title = cfg.title || "<i class='glyphicon glyphicon-question-sign' aria-hidden='true'></i> 确认提示";
        cfg.cancel_label = cfg.cancel_label == _CONFIG.cancel_label ? "<i class='glyphicon glyphicon-remove' aria-hidden='true'></i> 取消" : cfg.cancel_label;

        return createModal(cfg, true, true);
    };

    modals.popup = function (cfg) {
        return createModal(cfg || {}, false, false);
    };


    /****************************************************************************
     * window
     ***************************************************************************/

    //{"backdrop":"static"}点击背景不会消失  
    var _win_config = { winId: "user-win", backdrop: true, keyboard: true, width: 900 };
    //config={win:'userWin',top:'auto'/20,width:'900px',title:'新增用户'}
    modals.openWin = function (config) {
        var winId = config.winId || _win_config.winId;
        this.closeWin(winId);
        /*if($("#"+winId).length>0){
            this.showWin(winId);
            return false;
        }*/
        config = $.extend({}, _win_config, config);
        this._create_modal(config);
        if (!config.url && !config.loadContent) {
            this.error("未配置url");
        }
        $("#" + winId).modal({ remote: config.url, backdrop: config.backdrop || _win_config.backdrop, keyboard: config.keyboard || _win_config.keyboard });
        if (config.loadContent) {
            config.loadContent();
        }
        this.showWin(config.winId || _win_config.winId);
        //attach show event
        $("#" + winId).on("shown.bs.modal", function () {
            /*if(config.top=="auto"){
                var height=$(window).height()>$(this).find(".modal-dialog").eq(0).height()?($(window).height()-$(this).find(".modal-dialog").eq(0).height())/2:0;
                $(this).find(".modal-dialog").eq(0).css("margin-top",height); 
            }*/
            $(this).on("loaded.bs.modal", function (event) {
                $(this).find(".modal-title").html(config.title);
            });
            if (config.showFunc)
                config.showFunc.call(this);
        });
        //attach hidden event
        $("#" + winId).on("hidden.bs.modal", function () {
            modals.closeWin(winId);
            if (config.hideFunc)
                config.hideFunc.call(this);
            modals.fixwyhtml5();
            $(this).removeData("bs.modal");

        });
    };
    //add by billjiang fix the wyhtml5 problem: wyhtml has the modal class,make the scrollbar hidden
    modals.fixwyhtml5 = function () {
        if ($(".wysihtml5-editor")) {
            $(document.body).removeClass("modal-open");
            $(document.body).css("padding-right", "0px");
        }
    };
    modals._create_modal = function (config) {
        var modal = document.createElement("DIV");
        modal.id = config.winId;
        modal.className = "modal fade";
        modal.tabindex = -1;
        modal.role = "dialog";
        modal.setAttribute("aria-labelledby", "myModalLabel");
        modal.setAttribute("aria-hidden", true);

        // <div class="modal-dialog" role="document">
        var dialog = document.createElement("DIV");
        dialog.className = "modal-dialog";
        dialog.role = "document";
        if (isNaN(config.width) && config.width.indexOf("px") > 0)
            $(dialog).css("width", config.width);
            //dialog.style='width:'+config.width+';';
        else
            $(dialog).css("width", config.width + "px");
        //dialog.style='width:'+config.width+'px;'; 
        modal.appendChild(dialog);

        // <div class="modal-content">
        var content = document.createElement("DIV");
        content.className = "modal-content";
        dialog.appendChild(content);

        document.body.appendChild(modal);
    };
    modals.closeWin = function (winId) {
        winId = winId || _win_config.winId;
        var win = document.getElementById(winId);
        if (win) {
            $(win).remove();
            $("div.modal-backdrop").remove();
        }
    };
    modals.hideWin = function (winId) {
        winId = winId || _win_config.winId;
        $("#" + winId).modal("hide");
    };
    modals.showWin = function (winId) {
        winId = winId || _win_config.winId;
        $("#" + winId).modal("show");
    };
    modals.removeData = function (winId) {
        winId = winId || _win_config.winId;
        //$("#myModal").on("hidden.bs.modal", function() {
        $("#" + winId).removeData("bs.modal");
        //});
    };
})(jQuery, window, document);